<template>
	<view class="confirm-order">
		<common-line></common-line>
		<view class="order-address" @tap="showAddress">
			<view class="address">
				<image class="address-icon" src="../../static/icon/address.png" mode=""></image>
			</view>
			<view class="address-content">
				<view>
					<view class="detail-addr">
						{{ defaultAddress.detailAddress }}
					</view>
					<view class="address-title">
						<view class="recive-name">{{ defaultAddress.name }}</view>
						<view class="recive-phone">{{ defaultAddress.phone }}</view>
					</view>
				</view>
				<view class="more">
					<span class="iconfont icon-gengduo" style="font-size: 24rpx;color: #929292;"></span>
				</view>
			</view>
		</view>

		<view class="goods-list">
			<view class="order-item" v-for="(item,index) in confirmInfo.items" :key="index">
				<view class="sku-info">
					<image class="goods-img" :src="item.skuPic" mode=""></image>
					<view class="goods-detail">
						<view class="goods-detail-top">
							<view class="goods-name">
								{{ item.spuName }}
							</view>
							<view><text class="price-prefix">¥</text>
								<view class="sku-price">{{ item.skuPrice }}</view>
							</view>
						</view>
						<view class="goods-attr">
							<view class="attrs" :key="index">
								{{ item.skuAttrsVals }}
							</view>
						</view>
						<view class="goods-num">
							<!-- <uni-number-box disabled @change="numChangeHandle($event,item)" :min="1"
								v-model="item.skuQuantity"></uni-number-box> -->
							{{ 'x' + item.skuQuantity }}
						</view>
					</view>
				</view>
				<view class="service-item" @tap="showNote(index)">
					<view class="service-title">订单备注</view>
					<view class="service-more">
						<span style="color: black;" v-if="item.remark">{{ item.remark }}</span>
						<span style="color: #929292;font-size: 24rpx" v-else>无备注</span>
						<span class="iconfont icon-gengduo" style="font-size: 24rpx;color: #929292;"></span>
					</view>
				</view>
			</view>

			<view class="collect">
				<view class="collect-item">
					<view class="collect-k">商品金额</view>
					<view class="collect-v" style="margin-right: 15rpx;font-weight: 500;">¥{{confirmInfo.totalAmount}}
					</view>
				</view>
				<view class="collect-item" @tap="openCouponPopup">
					<view class="collect-k">优惠券</view>
					<view>
						<view v-if="confirmInfo.coupon" class="collect-v" style="color: #EC3B29;font-weight: 500;">
							-¥{{ confirmInfo.coupon.amount }}</view>
						<view v-else class="collect-v" style="color: #929292;">暂无可用</view>
						<uni-icons type="forward" size="12" color="#929292"></uni-icons>
					</view>
				</view>
				<view class="collect-item">
					<view class="collect-k">积分(剩余{{ userInfo.integral }})</view>
					<view>
						<view class="collect-v" style="color: #929292;">(暂不支持使用积分)</view>
						<uni-icons type="forward" size="12" color="#929292"></uni-icons>
					</view>
				</view>
				<view class="collect-footer">
					<view style="margin-right: 15rpx;">
						合计:
						<view style="color: #EC3B29;font-weight: 500;display: inline;">
							¥{{confirmInfo.payAmount}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="order-foot">
			<view class="total-count foot-item">{{ `共${confirmInfo.count}件` }}</view>
			<view class="total-amount-box">合计:
				<text class="total-price-prefix font-active-color">¥</text>
				<text class="font-active-color total-amount">{{ confirmInfo.payAmount }}</text>
			</view>
			<view class="confirm" @tap="submitOrder">提交订单</view>
		</view>

		<uni-popup ref="popup" type="bottom">
			<view class="popup-box-title">选择优惠券</view>
			<view class="popup-box-content">
				<view class="popup-content">
					<coupon-select v-if="confirmInfo && confirmInfo.coupon" @ok="changeCoupon"
						:coupon-id="confirmInfo.coupon.id" :order="confirmInfo"
						:spu-id="confirmInfo.spuId"></coupon-select>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="addressPopup" type="bottom">
			<view class="popup-box-title">选择收货地址</view>
			<view class="popup-box-content" style="background-color: #F0F1F5;">
				<view class="popup-content">
					<view>
						<address-select ref="addressSelect" @ok="changeAddress"></address-select>
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import CommonLine from '../../components/common/CommonLine.vue'
	import AddressSelect from '@/components/common/AddressSelect.vue'
	import CouponSelect from '../../components/common/CouponSelect.vue'
	import $http from '@/common/api/request.js'
	export default {
		components: {
			CommonLine,
			CouponSelect,
			AddressSelect
		},
		data() {
			return {
				confirmInfo: {},
				defaultAddress: {},
				cart: {},
				couponId: '',
				// 单商品结算使用
				skuId: '',
				num: 0,
				userInfo: {},
			}
		},
		onLoad(e) {
			if (e.skuId) {
				this.skuId = e.skuId
				this.num = e.num
			}
			this.loadData()
		},
		onShow() {
			this.$refs.addressSelect.loadData()
		},
		methods: {
			loadData() {
				if (this.skuId) {
					this.getSingleConfirmOrder(this.skuId, this.num)
				} else {
					this.getConfirmOrder()
				}
				this.getMemberInfo()
			},
			changeAddress(e) {
				this.defaultAddress = e
				this.$refs.addressPopup.close()
			},
			getMemberInfo() {
				$http.request({
					url: `/member/member/info`
				}).then(res => {
					if (res.success) {
						this.userInfo = res.data
					}
				})
			},
			changeCoupon(coupon) {
				this.couponId = coupon.id
				this.loadData()
				this.$refs.popup.close()
			},
			getConfirmOrder() {
				let data = {}
				if (this.couponId) {
					data.couponId = this.couponId
				}
				$http.request({
					url: '/order/order/cartOrderConfirm',
					data: data,
					loading: true
				}).then(res => {
					if (res.success) {
						this.confirmInfo = res.data
						this.defaultAddress = res.data.defaultAddress
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 1000
						})
					}
				})
			},
			openCouponPopup() {
				this.$refs.popup.open()
			},
			showAddress() {
				this.$refs.addressPopup.open()
			},
			getSingleConfirmOrder(skuId, num) {
				let data = {
					skuId,
					num
				}
				if (this.couponId) {
					data.couponId = this.couponId
				}
				$http.request({
					url: '/order/order/singleOrderConfirm',
					data: data,
					loading: true
				}).then(res => {
					if (res.success) {
						this.confirmInfo = res.data
						this.defaultAddress = res.data.defaultAddress
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 1000
						})
					}
				})
			},
			showNote(index) {
				let self = this
				uni.showModal({
					title: '提示',
					editable: true,
					placeholderText: '请输入备注',
					success: function(res) {
						if (res.confirm) {
							if (res.content) {
								self.confirmInfo.items[index].remark = res.content
							}
						}
					}
				});
			},
			submitOrder() {
				if(!this.defaultAddress && !this.defaultAddress.id) {
					uni.showToast({
						title: '请选择收货地址',
						icon: 'none',
						duration: 1000
					})
					return
				}
				this.confirmInfo.addressId = this.defaultAddress.id
				if (this.confirmInfo.coupon) {
					this.confirmInfo.couponId = this.confirmInfo.coupon.id
				}
				$http.request({
					url: '/order/order/submit',
					data: this.confirmInfo,
					method: 'POST',
					loading: true,
					loadingText: '正在提交订单'
				}).then(res => {
					if (res.success) {
						uni.navigateTo({
							url: '/pages/pay/pay?amount=' + res.data.payAmount + '&orderSn=' + res.data
								.orderSn
						})
					}
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 1000
					})
				})
			}
		}
	}
</script>

<style scoped>
	.popup-box-content {
		height: 900rpx;
		background-color: #FFF;
		border-radius: 15rpx;
		padding: 20rpx 10rpx 80rpx 10rpx;
		overflow: scroll;
	}

	.popup-box-title {
		padding: 10rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		position: fixed;
		text-align: center;
		height: 60rpx;
		font-weight: 600;
		background-color: #FFF;
		z-index: 999;
	}

	.popup-content {
		margin-top: 80rpx;
	}

	.collect {
		margin: 20rpx auto;
		border-radius: 10rpx;
		width: 98%;
		box-sizing: border-box;
		background-color: #FFFFFF;
		padding: 20rpx 20rpx 10rpx 20rpx;
	}

	.collect-item {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		padding: 10rpx 0;
	}

	.collect-v {
		display: inline;
	}

	.collect-footer {
		border-top: 2rpx #FBFBFB solid;
		margin-top: 10rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		display: flex;
		justify-content: flex-end;
	}

	.confirm-order {
		background-color: #F2F2F2;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
	}

	.sku-price {
		font-weight: 600;
		display: inline-block;
	}

	.price-prefix {
		padding-right: 5rpx;
		font-size: 20rpx;
		font-weight: 800;
	}

	.total-count {
		font-weight: 500;
		padding-top: 6rpx;
		color: #939393;
		padding-right: 10rpx;
	}

	.total-amount-box {
		font-weight: 600;
	}

	.total-price-prefix {
		font-size: 24rpx;
		font-weight: 600;
		padding: 0 5rpx;
	}

	.total-amount {
		font-size: 36rpx;
	}

	.foot-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.service-item {
		display: flex;
		padding: 0 20rpx;
		height: 80rpx;
		justify-content: space-between;
	}

	.service-title {
		font-size: 24rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.service-more {
		height: 80rpx;
		line-height: 80rpx;
	}

	.order-address {
		margin: 20rpx auto;
		border-radius: 10rpx;
		width: 98%;
		box-sizing: border-box;
		display: flex;
		background-color: #FFFFFF;
		height: 120rpx;
		padding: 20rpx;
	}

	.address-content {
		flex: 1;
		margin-left: 20rpx;
		display: flex;
		justify-content: space-between;

		.more {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
	}

	.address {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.order-item {
		background-color: #FFFFFF;
		width: 98%;
		margin: 0 auto;
		border-radius: 10rpx;
	}

	.address-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.detail-addr {
		font-weight: 800;
	}

	.recive-name {
		display: inline-block;
		font-weight: 400;
		font-size: 28rpx;
		color: #606060;
	}

	.recive-phone {
		display: inline-block;
		font-weight: 400;
		font-size: 28rpx;
		color: #606060;
		margin-left: 20rpx;
	}

	.sku-info {
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;
		border-radius: 30rpx;
	}

	.goods-img {
		width: 210rpx;
		height: 210rpx;
	}

	.goods-name {
		font-size: 26rpx;
		overflow: hidden;
		width: 70%;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.goods-num {
		display: flex;
		justify-content: flex-end;
		width: 100%;
		padding-top: 30rpx;
	}

	.goods-detail {
		width: 64%;
		height: 130rpx;
		padding: 0 20rpx;
	}

	.goods-detail-top {
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	.goods-attr {
		margin-top: 20rpx;
		display: inline-block;
		font-size: 22rpx;
		color: #6E6E6E;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		max-width: 100%;
		padding: 3rpx 12rpx;
		box-sizing: border-box;
	}

	.attrs {
		display: inline-block;
	}

	.order-content {
		margin-top: 30rpx;
		padding: 10rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
	}

	.order-foot {
		display: flex;
		position: fixed;
		left: 0;
		bottom: var(--window-bottom, 0);
		width: 100%;
		height: 120rpx;
		justify-content: flex-end;
		align-items: center;
		background-color: #FFFFFF;
		border-top: 2rpx solid white;
		box-sizing: border-box;
		padding: 0 15rpx;
	}

	.confirm {
		margin-left: 10rpx;
		background-color: #ED3020;
		border-radius: 60rpx;
		color: white;
		font-weight: 800;
		padding: 18rpx 50rpx;
	}
</style>